// 闭包
// (function() {

let todo_api = '/api/v1/';
let list = []

function todo_find_list_by_tid(tid) {
  for (let i of list)
    if (i.tid == tid)
      return i;
  return undefined;
}

// 点击checkbox的事件
function todo_on_check(event) {
  let splits = event.target.id.split('-');
  let tid = splits[splits.length - 1];
  if (tid === undefined) return;
  // 注意区分数字的和字符串的id
  tid = parseInt(tid);
  if (isNaN(tid)) return;
  console.log(tid, event.target.checked);
  let todo = todo_find_list_by_tid(tid);
  if (!todo) return;
  if (todo.finished == event.target.checked) return;
  todo.finished = event.target.checked;
  todo_update_one({
    tid: tid,
    finished: event.target.checked
  });
}

// 为单个的Todo生成一个表项DOM
function todo_item_make_dom(todo) {
  let root = $("<div></div>");
  let tid = todo.tid;
  if (tid === undefined) tid = '';
  root.addClass('todo-item');
  if (tid !== '')
    // root.addClass('todo-tid-' + tid);
    root.attr("id", 'todo-tid-' + tid);
  let checkbox = $(`<input type="checkbox" class="todo-item-checkbox" id="todo-item-checkbox-${tid}" ${todo.finished ? 'checked' : ''}>`);
  // console.log('checkbox', checkbox);
  root.append(checkbox);
  root.append($(`<span class="todo-item-name">${todo.name}</span>`));
  if (todo.type === 0) {
    // SIMPLE
  } else if (todo.type === 1) {
    // DAY_TIME
  } else if (todo.type === 2) {
    // START_STOP_TIME
  }
  return root;
}

// 更新点击事件
function todo_events_update() {
  $(".todo-item-checkbox").click(todo_on_check);
}

// 更新列表中的Todo
async function todo_update_list() {
  await todo_fetch_all();
  $("#todo-list").html('');
  console.log('list', list)
  for (let i of list) {
    let el = todo_item_make_dom(i);
    // FATAL: 在async函数中jquery必须实时查询!!
    $("#todo-list").append(el);
    // console.log(i, 'dom now:', $("#todo-list").html());
  }
  todo_events_update();
}


// 获取全部数据的异步函数
async function todo_fetch_all() {
  let result = await (await fetch(todo_api + 'fetch/')).json();
  if (result.code !== 0) {
    console.error(result.message);
    return []
  }
  list = result.data;
  return list;
}

// function todo_fetch_one(tid) {
//   let todo = await (await fetch(todo_api + 'fetch/' + tid)).json();
//   console.log(todo);
//   return todo;
// }

async function todo_update_one(todo) {
  // 更新单个Todo
  if (!todo || !todo.tid) return;
  // 这里是一种ES6的语法，()=>{}箭头方法定义函数
  // 和直接function定义稍有差别，就是this的指向不同
  let d = await fetch(todo_api + 'update/' + todo.tid, {
    // GET 没法用body
    method: 'POST',
    body: JSON.stringify(todo)
  });
  // response.json()是异步函数，用await可以异步获取值
  let js = await d.json();
  console.log('update => callback', js);
  if (js.code !== 0) return;
  todo_update_list();
}

// js同样支持默认参数来着
async function todo_submit(name, desp = '', type = 0,
  time_start = undefined, time_stop = undefined) {
  let d = await fetch(todo_api + 'submit', {
    method: 'POST',
    body: JSON.stringify({
      name: name,
      description: desp,
      type: type,
      time_start: time_start,
      time_stop, time_stop
    })
  });
  if (d.code !== 0) {
    console.error(d.message);
    return;
  }
}

async function main() {
  // 设置回调函数
  await todo_update_list();
  $(".todo-submit").click(() => {
    (async function () {
      await todo_submit($("#todo-input")[0].value);
      await todo_update_list();
    })();
  });
}

// main
main();

// })();